<template>
    <div>

        <div class="toolbar">
            <el-form :inline="true" :model="q" size="mini">
                <el-form-item>
                    <el-button type="text" disabled>{{this.Timetype?'最后活跃时间':'注册时间'}}
                    </el-button>
                    (
                    <el-button type="text" @click="toggleTimetype">点击切换</el-button>
                    )

                    <el-date-picker v-if="Timetype"  v-model="q.last_active_at_start_time" value-format="yyyy-MM-dd"
                                    type="date" placeholder="选择日期时间"></el-date-picker>
                    <el-date-picker v-else v-model="q.registered_at_start_time" value-format="yyyy-MM-dd"
                                    type="date" placeholder="选择日期时间"></el-date-picker>
                    -
                    <el-date-picker  v-if="Timetype" v-model="q.last_active_at_end_time" value-format="yyyy-MM-dd" type="date"
                                    placeholder="选择日期时间"></el-date-picker>
                    <el-date-picker v-else v-model="q.registered_at_end_time" value-format="yyyy-MM-dd"
                                    type="date" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="用户ID:">
                    <el-input v-model="q.user_id" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
                <el-form-item label="注册渠道:">
                    <el-input v-model="q.channel" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
                <el-form-item label="系统:">
                    <el-select v-model="q.platform" filterable placeholder="请选择系统">
                        <el-option  :label="'所有'" value=""></el-option>
                        <el-option v-for="(statu, index) of uaStatus" :key="index" :label="statu" :value="index"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="注册ip:">
                    <el-input v-model="q.registered_ip" prefix-icon="el-icon-edit"  placeholder="请输入ip地址"></el-input>
                </el-form-item>
                <el-form-item label="所属组员:" v-if="roles.includes(6)||roles.includes(1)||roles.includes(5)">
                    <more-selete v-if="staffArray &&restInit" :dataList="staffArray" @checkedMore="q.staff_list= $event" :placeholder="'请选择组员'"></more-selete>
                </el-form-item>
                <el-form-item label="所属组长:" v-if="roles.includes(6)||roles.includes(5)">
                    <more-selete v-if="leaderArray &&restInit" :dataList="leaderArray" @checkedMore="q.section_chief_list= $event" :placeholder="'请选择组长'"></more-selete>
                </el-form-item>
                <el-form-item label="所属主管:" v-if="roles.includes(6)">

                    <more-selete v-if="managerArray &&restInit" :dataList="managerArray" @checkedMore="q.leader_list= $event" :placeholder="'请选择主管'"></more-selete>
                </el-form-item>
                <el-form-item label="所属平台:">
                    <el-select v-model="q.index" filterable placeholder="请选择所属平台">
                        <el-option  :label="'所有'" value=""></el-option>
                        <el-option v-for="(statu, index) of index_mapper" :key="index" :label="statu" :value="index"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" disabled>{{this.togtype.recharge?'当日充值':'累积充值'}}
                    </el-button>
                    (
                    <el-button type="text" @click="togrecharge">点击切换</el-button>
                    )
                    <el-form-item  >
                        <el-input v-if="togtype.recharge" v-model="q.recharge_gte" prefix-icon="el-icon-edit"></el-input>
                        <el-input v-else v-model="q.total_recharge_gte" prefix-icon="el-icon-edit"></el-input>

                    </el-form-item>
                    -
                    <el-form-item  >
                        <el-input v-if="togtype.recharge" v-model="q.recharge_lt" prefix-icon="el-icon-edit"></el-input>
                        <el-input v-else v-model="q.total_recharge_lt" prefix-icon="el-icon-edit"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" disabled>{{this.togtype.profit?'当日盈利':'累积盈利'}}
                    </el-button>
                    (
                    <el-button type="text" @click="togprofit">点击切换</el-button>
                    )
                    <el-form-item  >
                        <el-input v-if="togtype.profit" v-model="q.profit_gte" prefix-icon="el-icon-edit"></el-input>
                        <el-input v-else v-model="q.total_profit_gte" prefix-icon="el-icon-edit"></el-input>

                    </el-form-item>
                    -
                    <el-form-item  >

                        <el-input v-if="togtype.profit" v-model="q.profit_lt" prefix-icon="el-icon-edit"></el-input>
                        <el-input v-else v-model="q.total_profit_lt" prefix-icon="el-icon-edit"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" disabled>{{this.togtype.tax?'当日玩法税收':'累积玩法税收'}}
                    </el-button>
                    (
                    <el-button type="text" @click="togtax">点击切换</el-button>
                    )
                    <el-form-item  >
                        <el-input v-if="togtype.tax" v-model="q.tax_gte" prefix-icon="el-icon-edit"></el-input>
                        <el-input v-else v-model="q.total_tax_gte" prefix-icon="el-icon-edit"></el-input>

                    </el-form-item>
                    -
                    <el-form-item  >
                        <el-input v-if="togtype.tax" v-model="q.tax_lt" prefix-icon="el-icon-edit"></el-input>
                        <el-input v-else v-model="q.total_tax_lt" prefix-icon="el-icon-edit"></el-input>
                    </el-form-item>
                </el-form-item>

                <el-form-item>
                    <el-button type="text" disabled>{{this.togtype.channeltax?'当日渠道实际税收':'累积渠道实际税收'}}
                    </el-button>
                    (
                    <el-button type="text" @click="togchanneltax">点击切换</el-button>
                    )
                    <el-form-item  >
                        <el-input v-if="togtype.channeltax" v-model="q.real_channel_tax_gte" prefix-icon="el-icon-edit"></el-input>
                        <el-input v-else v-model="q.total_real_channel_tax_gte" prefix-icon="el-icon-edit"></el-input>
                    </el-form-item>
                        -
                    <el-form-item  >
                        <el-input v-if="togtype.channeltax" v-model="q.real_channel_tax_lt" prefix-icon="el-icon-edit"></el-input>
                        <el-input v-else v-model="q.total_real_channel_tax_lt" prefix-icon="el-icon-edit"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button type="danger" @click="reload">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row type="flex" class="row-bg btn-row" justify="end">
            <el-button  size="mini"  type="primary" @click="downloadData"   icon="el-icon-download">导出数据</el-button>
        </el-row>
        <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit highlight-current-row>
            <el-table-column prop="user_id" label="用户ID" width="150" ></el-table-column>
            <el-table-column prop="index" label="平台"  width="150"  >
                <template slot-scope="scope">
                    <span >{{index_mapper[scope.row.index]}}</span>
                   </template>
            </el-table-column>
            <el-table-column prop="registered_at" label="注册时间"  width="150" :sortable="'custom'"></el-table-column>
            <el-table-column prop="channel" label="注册渠道"  width="150"  ></el-table-column>
            <el-table-column prop="platform" label="系统">
                <template slot-scope="scope">
                    <span >{{uaStatus[scope.row.platform]}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="registered_ip" label="注册ip"  width="150"></el-table-column>
            <el-table-column prop="manager_name" v-if="roles.includes(6)" label="所属主管"></el-table-column>
            <el-table-column prop="leader_name" v-if="roles.includes(6)||roles.includes(5)" label="所属组长"></el-table-column>
            <el-table-column prop="staff_name" v-if="roles.includes(6)||roles.includes(1)||roles.includes(5)" label="所属组员"></el-table-column>
            <el-table-column prop="balance" label="账户余额" width="130" :sortable="'custom'">
                <template slot-scope="scope">
                    <span v-if="scope.row.balance">{{scope.row.balance.toFixed(2)}}</span>
                    <span v-else>0</span></template> </el-table-column>
            <el-table-column prop="safe_balance" label="保险柜余额" width="130" :sortable="'custom'">
                <template slot-scope="scope">
                <span v-if="scope.row.safe_balance">{{scope.row.safe_balance.toFixed(2)}}</span>
                <span v-else>0</span></template> </el-table-column>
            <el-table-column prop="recharge" label="当日充值" width="130" :sortable="'custom'">
                <template slot-scope="scope">
                    <span v-if="scope.row.recharge">{{scope.row.recharge.toFixed(2)}}</span>
                    <span v-else>0</span></template></el-table-column>
            <el-table-column v-if="roles.includes(6)||roles.includes(5) " prop="profit" label="当日盈利" width="130" :sortable="'custom'">
                <template slot-scope="scope">
                    <span  v-if="scope.row.profit">{{scope.row.profit.toFixed(2)}}</span>
                    <span v-else>0</span></template>
            </el-table-column>

            <el-table-column prop="tax" label="当日玩法税收" width="130" :sortable="'custom'" >
                <template slot-scope="scope">
                    <span v-if="scope.row.tax">{{scope.row.tax.toFixed(2)}}</span>
                    <span v-else>0</span></template>
            </el-table-column>
            <el-table-column prop="real_channel_tax" label="当日渠道实际税收" width="150" :sortable="'custom'">
                <template slot-scope="scope">
                    <span  v-if="scope.row.real_channel_tax">{{scope.row.real_channel_tax.toFixed(2)}}</span>
                    <span v-else>0</span></template>
            </el-table-column>
            <el-table-column prop="total_recharge" v-if="roles.includes(6)||roles.includes(5)" label="累积充值" width="130" :sortable="'custom'">
                <template slot-scope="scope">
                    <span v-if="scope.row.total_recharge">{{scope.row.total_recharge.toFixed(2)}}</span>
                    <span v-else>0</span></template></el-table-column>
            <el-table-column v-if="roles.includes(6)||roles.includes(5) " prop="total_profit" label="累积盈利" width="130" :sortable="'custom'">
                <template slot-scope="scope">
                    <span  v-if="scope.row.total_profit">{{scope.row.total_profit.toFixed(2)}}</span>
                    <span v-else>0</span></template>
            </el-table-column>
            <el-table-column prop="total_tax" label="累积玩法税收" width="130"  :sortable="'custom'">
                <template slot-scope="scope">
                    <span v-if="scope.row.total_tax">{{scope.row.total_tax.toFixed(2)}}</span>
                    <span v-else>0</span></template>
            </el-table-column>

            <el-table-column prop="total_real_channel_tax" label="累积渠道实际税收" width="150" :sortable="'custom'">
                <template slot-scope="scope">
                    <span  v-if="scope.row.total_real_channel_tax">{{scope.row.total_real_channel_tax.toFixed(2)}}</span>
                    <span v-else>0</span></template>
            </el-table-column>
            <el-table-column prop="last_active_at" label="最后活跃时间" width="150" :sortable="'custom'"></el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                            :page-size="q.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listData.total">
            </el-pagination>
        </div>
        <save-update  v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :rolelist="rolelist"></save-update>
    </div>
</template>

<script>
    import { getGameUserList, getChnOptions } from '@/api'
    import MoreSelete from '@/components/MoreSelete/index'
    import {queryFilter} from '@/utils/patch'
    import { AppModule } from '@/store/modules/app';
    import timedate from '@/utils/timedate'
    export default {
        components: {MoreSelete},
        data() {
            return {
                restInit: true,
                listData: {},
                q: {page_size: 30, page_no: 1, last_active_at_start_time: timedate.dateYesterday, last_active_at_end_time: timedate.dateToday},
                listLoading: false,
                showUpdate: false,
                show_id: null,
                stafflist: [],
                leaderlist: [],
                staffArray: [],
                leaderArray: [],
                managerlist: [],
                managerArray: [],
                Timetype: true,
                togtype:{
                  recharge:true,
                  profit:true,
                  channeltax:true,
                  tax:false,
                },
                roles:[],
                uaStatus:{
                    ios:'ios',
                    android:'android'
                },
            }
        },
        created() {
            this.getStaffList();
            this.getLeaderList();
            this.getManagerList();
            this.getroles();
        },
        mounted(){
            this.getList()
        },
        computed: {
            index_mapper(){
                return AppModule.index_mapper
            }
        },
        deactivated(){
            this.listLoading = false
        },
        methods: {
            async getLeaderList(){
                await getChnOptions({data_type: 'leader'}).then(res => {
                    if(res.status === 0){
                        this.leaderlist = res.data
                        this.leaderArray = []
                        this.leaderlist.map(item => {
                            this.leaderArray.push(item.name)
                        })
                    }
                })
            },
            async getStaffList(){
                await getChnOptions({data_type: 'staff'}).then(res => {
                    if(res.status === 0){
                        this.stafflist = res.data
                        this.staffArray = []
                        this.stafflist.map(item => {
                            this.staffArray.push(item.name)
                        })
                    }
                })
            },
            async getManagerList(){
                await getChnOptions({data_type: 'manager'}).then(res => {
                    if(res.status === 0){
                        this.managerlist = res.data
                        this.managerArray = []
                        this.managerlist.map(item => {
                            this.managerArray.push(item.name)
                        })
                    }
                })
            },
            getroles(){
                this.roles=this.$store.state.user.roles.map(item=>{
                    return item.id
                })
            },
            downloadData(){
                let queryObj = queryFilter(this.q)
                let data = Object.assign({},queryObj,{ to_export_file: true})
                getGameUserList(data).then(res => {
                    if (res.status === 0) {
                        window.location.href = window.location.origin + res.data.url
                    }
                })
            },
          togtax(){
            this.togtype.tax=this.togType(this.togtype.tax,{startype:'tax_gte',endtype:'tax_lt'},{startype:'total_tax_gte',endtype:'total_tax_lt'})
          },
          togchanneltax (){
              this.togtype.channeltax=this.togType(this.togtype.channeltax,{startype:'real_channel_tax_gte',endtype:'real_channel_tax_lt'},{startype:'total_real_channel_tax_gte',endtype:'total_real_channel_tax_lt'})
            },
              togprofit(){
                this.togtype.profit=this.togType(this.togtype.profit,{startype:'profit_gte',endtype:'profit_lt'},{startype:'total_profit_gte',endtype:'total_profit_lt'})
              },
            togrecharge(){
              this.togtype.recharge=this.togType(this.togtype.recharge,{startype:'recharge_gte',endtype:'recharge_lt'},{startype:'total_recharge_gte',endtype:'total_recharge_lt'})
            },
            togType(type,{startype='',endtype=''}={},{startype_='',endtype_=''}={},){
              if (type) {
                Reflect.deleteProperty(this.q,startype)
                Reflect.deleteProperty(this.q,endtype)
              } else {
                Reflect.deleteProperty(this.q,startype_)
                Reflect.deleteProperty(this.q,endtype_)
              }
              type= !type
              return type;
            },
            toggleTimetype() {
                if (this.Timetype) {
                  Reflect.deleteProperty(this.q,'last_active_at_start_time')
                  Reflect.deleteProperty(this.q,'last_active_at_end_time')
                } else {
                  Reflect.deleteProperty(this.q,'registered_at_start_time')
                  Reflect.deleteProperty(this.q,'registered_at_end_time')
                }
              this.Timetype = !this.Timetype
            },
            add(){
                this.show_id = null
                this.showUpdate = true
            },
            update(row){
                this.show_id = row.id
                this.showUpdate = true
            },
            remove(row){
                this.$confirm(`确认删除ID为${row.id}的项么？`, '删除用户', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            query(){
                this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
                this.getList()
            },
            reload() {
                this.restInit = false
                this.$nextTick(() => (this.restInit = true))
                this.q = {page_size: 30, page_no: 1, }
                this.getList()
            },
            sortlist(sort){
                if( this.q.order_by&&this.q.order_by==='-'+sort.prop){ delete this.q.order_by}
                else{
                this.q.order_by=this.q.order_by===sort.prop&& "-"+sort.prop||sort.prop}
                this.getList()
            },
            handleSizeChange (val) {
                this.q.page_size = val
                this.getList()
            },
            handleCurrentChange (val) {
                this.q.page_no = val
                this.getList()
            },
            async getList(){
                let queryObj = queryFilter(this.q)
                await  getGameUserList(queryObj).then(res => {
                    if(res.status === 0){
                        this.listLoading = false
                        this.listData = res.data
                    }
                }).catch(()=>{
                    console.log('超时')
                })
            },
        },
        watch: {
            showUpdate() {
                if(!this.showUpdate){
                    this.getList()
                }
            }
        }
    }
</script>
